<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一次登录重置密码</title>
    <link rel="stylesheet" href="/sybida/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="/sybida/bs/bootstrap.min.css">
    <script src="/sybida/common/js/locahostadress.js" charset="utf-8"></script>
    <style>
        body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input{ margin:0; padding:0;}
        h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
        ol,ul{ list-style:none;}
        img,fieldset{ border:0 none; display:block;}
        body{
            font-size: 18px;
        }
        .strong p{

        }
        .strong p span{
            display: inline-block;
            font-weight: normal;
            font-style: normal;
            padding:0;
            margin:0;
            width:100px;
            height:25px;
            line-height: 25px;
            background: #f9d194;
            font-size: 15px;
            color:#fff;
            text-align: center;

        }


        .strong p{
            font-size: 0;
        }

        .strong p.active2 span:nth-child(2){
            background: #000000;
        }
        .strong p.active3 span:nth-child(3){
            background: #000000;
        }
        .strong p.active1 span:nth-child(1){
            background: #000000;
        }


        .warn{
            display: inline-block;
            width:18px;
            height:18px;
            background: url("img/warn.png");
            background-repeat: no-repeat;
            background-size:18px 18px;
            vertical-align: top;
        }
        .right{
            display: inline-block;
            width:20px;
            height:20px;
            background: url("img/right.png");
            background-repeat: no-repeat;
            background-size:20px 20px;
            vertical-align: top;
        }
        .cuo{
            display: inline-block;
            width:18px;
            height:18px;
            background: url("img/cuo.png");
            background-repeat: no-repeat;
            background-size:18px 18px;
            vertical-align: top;
        }
        .psdInfo{
            display: none;
            font-size: 14px;
            color:#888;
        }
        .psd1Info{
            display: none;
            font-size: 14px;
            color:#888;
        }
    </style>
</head>
<body>
<br>
<div class="container" style="width: 450px;">

    <label for="psd">输入密码 <span style="margin-left: 25px;margin-bottom: 8px;" class="psdInfo"></span></label>
    <input type="password" maxlength="16" class="form-control" id="psd" placeholder="Password">

    <div class="strong" >
        <p class="fl ">
            <span class="">弱</span>
            <span class="">中</span>
            <span class="">强</span>
        </p>
    </div>
    <br>
    <div class="passWord1-wrapper">
        <label for="psd1">确认密码：<span class="psd1Info" style="margin-left: 25px;margin-top: 8px;"></span></label>
        <input type="password" disabled class="form-control" id="psd1" placeholder="Password">


    </div>
    <br>
    <div style="text-align: center">
        <button type="button" class="btn btn-primary form-control" id="doit">确认修改</button>
    </div>
</div>
<script src="/sybida/jquery/jquery-3.3.1.min.js"></script>
<script src="/sybida/layui/layui.js" charset="utf-8"></script>
<script src="/sybida/bs/bootstrap.min.js"></script>


<script>
    var layer
    layui.use('layer', function(){
        layer = layui.layer;
    });
    $("#doit") .click(function () {
        var psd=$("#psd").val()
        var psd1=$("#psd1").val()
        //前端获取cookie的值
        function getCookie(name) {
            var prefix = name + "="  // name=
            // name=  第一次出现的位置
            var start = document.cookie.indexOf(prefix)
            if (start == -1) {
                return null;
            }
            // 从0+5这个位置开始，找到;第一次出现的位置，也就是这个cookie值得结束位置
            var end = document.cookie.indexOf(";", start + prefix.length)
            // name=wangwu
            // Hm_lvt_eaa57ca47dacb4ad4f5a2570;name=wangwu
            // 将字符串得总长度就是截取值得结束位置
            if (end == -1) { // 没有找到分号
                end = document.cookie.length;
            }
            var value = document.cookie.substring(start + prefix.length, end)
            return unescape(value);
        }



        if(psd==psd1 && psd && psd1){
            var userId = getCookie("userid")

            if(userId){
                $.post({
                    url:url+"/login/changepsd",
                    data:"userId="+userId+"&psd="+psd,
                    success:function(data){
                        if(data.code===1){
                            // window.parent.location.reload(); //刷新父页面
                            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(index);

                            window.location.href="/sybida/login.html?check=1"

                        }else{
                            layer.alert("密码修改失败请重试！");

                        }

                    }
                })
            } else {
                alert("修改密码失败，请重新登录！！！")
            }


        }
    })
    function findStr(str,n){
        var temp=0;
        for(var i=0;i<str.length;i++){
            if(str.charAt(i)==n){
                temp++;
            };
        };
        return temp;
    };
    window.onload=function() {
        var psd=document.getElementById("psd");
        var psd1=document.getElementById("psd1");
        var psdInfo=document.getElementsByClassName('psdInfo')[0];
        var psd1Info=document.getElementsByClassName('psd1Info')[0];
        var fl=document.getElementsByClassName("fl")[0];
        fl.className="active1";
        psd.onfocus=function(){
            psdInfo.style.display="inline-block";
            psdInfo.innerHTML='<i class="warn"></i> 6-16个字符';
        }
        psd.onkeyup=function(){
            var m=findStr(this.value,this.value[0]);
            if(this.value.length>5){
                if(m==this.value.length){
                    fl.className="active1";
                }else{
                    var　re_n =/[^\d]/g ;

                    if(!re_n.test(this.value))
                    {
                        fl.className="active2";
                    }else{
                        fl.className="active3";
                    }
                }}else{
                fl.className="active1";
            }
            if(this.value.length>5){

                psd1.removeAttribute("disabled");
                psd1Info.style.display="inline-block";
                psd1Info.innerHTML='<i class="warn"></i> 再输入一次';
            }else{

                psd1.setAttribute("disabled","disabled");
                psd1Info.style.display="none";
                psd1.value="";
            }
            if(this.value.length>18){

            }else{

                psd1.value="";
            }

        }
        psd.onblur=function(){

            if(this.value==""){
                psdInfo.innerHTML='<i class="cuo"></i> 不能为空';
            }else if(this.value.length<6||this.value.length>16){
                psdInfo.innerHTML='<i class="cuo"></i> 长度应为6-16个字符';
            }else{
                psdInfo.innerHTML='<i class="right"></i> OK';
            }
        }

        psd1.onblur=function(){
            if(this.value!=psd.value){
                psd1Info.innerHTML='<i class="cuo"></i> 两次输入的密码不一致';
            }else{
                psd1Info.innerHTML='<i class="right"></i> OK';
            }
        }
    }

</script>


</body>
</html>